<template>
  <div class="fa">
    <div class="pic-title">
      <img class="pic-title" src="@/assets/home_images/1_02.png">
    </div>
    <div class="line"></div>
    <el-menu
      :default-active="activeIndex"
      class="el-menu-demo"
      mode="horizontal"
      @select="handleSelect"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b">
      <el-menu-item index="1">首页</el-menu-item>
      <el-menu-item index="2">需求与供给拍卖实验</el-menu-item>
      <el-menu-item index="3">软件规模度量实验</el-menu-item>
      <el-menu-item index="4">财务分析实验</el-menu-item>
      <el-menu-item index="5">实验报告</el-menu-item>
    </el-menu>
    <div class="introduction">
      <div class="intr-title">实验介绍</div>
      <div class="intr-index">
        寻求如何使得参与实验学生的利润最大化。假设交易产品（参考书）由教师购买，学生们不必为此产品承担成本，即学生的收入等于其利润。这样，实验者的利润将等于交易价格乘以可能出售的产品（参考书）数量。
      </div>
      <div class="intr-index">
        采用“第二价格密封拍卖法”（维克里拍卖法）。某竞拍者在报价时并不知道其他竞拍者的报价（密封投标），报价最高者获得购买该产品的权利，但是他实际所支付的价格是仅次于最高报价的报价，即第二价格。这个规则将激励竞拍者们给出每人各自真实的意愿支付的价
      </div>
      <div class="intr-title">实验流程</div>
      <div>（1）用户参与实验，获得实验角色</div>
      <div class="intr-index">
        首先点击对应实验的参与后，获得自己的角色。用户会获得需求或者供给角色。
      </div>
      <div class="intr-index">
        作为需求角色，需要提出自己意愿的购买这一产品的预期价位。作为供给角色，则要提出自己意愿的出售这一产品的预期价位。
      </div>
      <div>（2）提交自己的报价</div>
      <div class="intr-index">通过参与报价按钮即可提交自己的报价。</div>
      <div>（3）查看实验数据图表</div>
      <div class="intr-index">实验中有三个图：需求价格图、供给价格图、需求供给平衡图；一个表：竞拍者意愿支付价格以及竞拍所得收益表。</div>
      <div class="intr-index">
        三个图分别展示了不同价格下的需求/供给数量，以及供给与需求达到平衡点的价格点。表则展示了根据需求数据，在维克里拍卖的规则下不同定价策略下出售者所能获得的收益。
      </div>
      <el-button class="btn" type="primary" @click="startAuction">开始实验</el-button>
    </div>
    <div class="footer">
      上海同济大学软件工程精品课程版权所有<br>
      上海市四平路1239号 021-65982200 <br>
      沪ICP备10014176号 　沪举报中心
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeIndex: '4'
    };
  },
  methods: {
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
      if (key == 1) {
        this.GoIndex();
      } else if (key == 2) {
        this.GoAuction();
      } else if (key == 3) {

      } else if (key == 4) {
        this.GoFinancialAnalysis();
      } else {
        this.GoPanel();
      }

    },
    GoIndex() {
      this.$router.push({path: '/home', query: {id: this.projectId}})
    },
    GoAuction() {
      this.$router.push({path: '/auction', query: {id: this.projectId}})
    },
    GoExperiment2() {

    },
    GoFinancialAnalysis() {
      this.$router.push({path: '/fa', query: {id: this.projectId}})
    },
    GoPanel() {
      this.$router.push({path: '/panel', query: {id: this.projectId}})
    },
    startFa() {
      this.$router.push({path: '/dashboard', query: {id: this.projectId}})
    },
    startAuction() {
      this.$router.push({path: '/auctionOut'})
    }
  }
}
</script>

<style scoped>
.fa {
  position: relative;
  width: 80%;
  left: 10%;
  text-align: left;
}

.introduction {
  position: relative;
  width: 80%;
  left: 10%;
}

.intr-title {
  position: relative;
  margin: 10px 10px 10px 10px;
  color: #007feb;
  font-size: 23px;
  text-align: center;
}

.intr-index {
  text-indent: 2em;
}

.btn {
  text-align: center;
  margin: 10px 10px 10px 10px;
  position: relative;
  left: 45%;
}
</style>
<style lang="scss" scoped>
.footer {
  padding: 55px 20px;
  text-align: center;
  background: #eeeeee;
}
</style>
